<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <style>
  .back {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(http://artem.anmedio.ru/dev/denis/1+2.jpg) center center #22181e no-repeat;
  background-size: cover;
}

#source-heart {
  width: 20px;
  height: 20px;
  position: fixed;
  right: 30px;
  top: 30px;
}

#button {
  width: 100px;
  height: 100px;
  left: 50%;
  top: 50%;
  margin: -50px;
  background: #22181e;
  position: fixed;
  border-radius: 50px;
  box-sizing: border-box;
  color: black;
  text-align: center;
  padding: 25px 0 0 3px;
  font-family: monospace;
  font-size: 40px;
  cursor: pointer;
  z-index: 20;
  box-shadow: 0 0 20px -5px #22181e;
  overflow: hidden;
}
#button img {
  position: absolute;
  left: -73%;
  top: 0;
  width: 180%;
}
#button svg {
  width: 50%;
  height: 50%;
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translateX(-50%) translateY(-45%);
}

.heart {
  position: fixed;
  width: 50px;
  z-index: 10;
  height: 50px;
  transform: translateX(-50%) translateY(-50%) scale(1.5);
  opacity: 1;
  transition: .5s ease;
  opacity: 0;
}

@keyframes show-heart {
  0% {
    opacity: 0;
    transform: translateX(-50%) translateY(-50%) scale(1.5) rotateZ(-15deg);
  }
  50% {
    opacity: .8;
  }
  100% {
    opacity: 0;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%) scale(0.2) rotateZ(15deg);
    display: none;
  }
}

  </style>
 </HEAD>

 <BODY>
 <div class="back"></div>
<div id="button">
  <!--<img src="https://pp.vk.me/c624230/v624230976/43e7b/T5WjDtwt80M.jpg" alt="" />--><svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="45.412px" height="45.413px" viewBox="0 0 45.412 45.413" style="enable-background:new 0 0 45.412 45.413;"
	 xml:space="preserve">
	<g>
		<path style="fill:#FFDCB9;" d="M45.412,16.024c0-6.918-5.668-12.547-12.635-12.547c-4.103,0-7.754,1.951-10.063,4.969
			c-2.311-3.018-5.965-4.969-10.07-4.969C5.672,3.477,0,9.105,0,16.024c0,10.422,14.892,25.911,22.715,25.911
			c1.185,0,2.531-0.358,3.965-0.998c0,0-5.476-4.086-7.683-5.672C13.625,31.402,5.143,22.639,5.143,16.024
			c0-4.082,3.365-7.403,7.5-7.403c4.135,0,7.5,3.321,7.5,7.403c0,1.42,1.151,2.572,2.572,2.572c1.42,0,2.57-1.152,2.57-2.572
			c0-4.082,3.361-7.403,7.492-7.403s7.492,3.321,7.492,7.403c0,6.723-8.544,15.977-14.113,19.411l4.394,3.244
			C37.761,33.575,45.412,23.497,45.412,16.024z"/>
	</g>
</svg></div>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script>
  color = ['#f9a363','#8c1346','#d13d3c','#e2663b'];
function addHeart(){
  randomColor = Math.floor(Math.random() * (4));
  randomX = Math.floor(Math.random() * (100));
  randomY = Math.floor(Math.random() * (100));
  svg = '<svg style="top:'+randomY+'%; left: '+randomX+'%;" class="heart" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 23.217 23.217" style="enable-background:new 0 0 23.217 23.217;" xml:space="preserve"><g><path style="fill:'+color[randomColor]+';" d="M11.608,21.997c-22.647-12.354-6.268-27.713,0-17.369C17.877-5.716,34.257,9.643,11.608,21.997z" /></g></svg>';
  $("body").append(svg);
}
function deleteHearts(){
  $('.heart:lt(100)').remove();
}
function centerHeart(){
  $(".heart").css('-webkit-animation','show-heart 4s ease');
}
setInterval(addHeart,50);
setInterval(centerHeart,200);
setInterval(deleteHearts,8000);


  </script>
 </BODY>
</HTML>
